<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<view class="store-inspection-container">
			<view class="grade-box">
				<view class="grade-top flexWrap">
					<view class="title">门店美团/抖音评分</view>
					<view class="time">更新时间：{{scoreInfo.updateTime||'--'}}</view>
				</view>
				<view class="flexWrap" style="gap: 14rpx;">
					<view class="grade-item">
						<view class="item-top flexWrap">
							<text class="name">美团评分</text>
							<!-- <view class="look">查看评价<uni-icons type="right" size="13" color=" rgba(255, 255, 255, 0.6)"></uni-icons></view> -->
						</view>
						<view class="score">{{scoreInfo.meituanScore||0.0}}</view>
						<view class="info">较昨日
							<text :class="{'up':Number(scoreInfo.meituanCompare)>0,'down':Number(scoreInfo.meituanCompare<0)}">
								<text v-if="Number(scoreInfo.meituanCompare>0)">+</text>
								{{scoreInfo.meituanCompare||'--'}}
							</text>
						</view>
						<view class="info">超越<text class="highlight">{{scoreInfo.meituanBeyond||'--'}}%</text>店铺</view>
					</view>
					<view class="grade-item">
						<view class="item-top flexWrap">
							<text class="name">抖音评分</text>
							<!-- <view class="look">查看评价<uni-icons type="right" size="13" color="rgba(255, 255, 255, 0.6)"></uni-icons></view> -->
						</view>
						<view class="score">{{scoreInfo.douyinScore||0.0}}</view>
						<view class="info">较昨日
							<text :class="{'up':Number(scoreInfo.douyinCompare)>0,'down':Number(scoreInfo.douyinCompare<0)}">
								<text v-if="Number(scoreInfo.douyinCompare>0)">+</text>
								{{scoreInfo.douyinCompare||'--'}}
							</text>
						</view>
						<view class="info">超越<text class="highlight">{{scoreInfo.douyinBeyond||'--'}}%</text>店铺</view>
					</view>
				</view>
			</view>

			<view class="warning-box" v-if="plantWarnList.length!=0">
				<view class="warn-top">
					<view class="title">设备状态提醒<text>{{plantWarnList.length}}</text>个</view>
					<view class="tips">设备即将耗尽，为保证用户良好的使用体验，请及时更换设备</view>
				</view>

				<view class="table-item" v-for="(item,index) in plantWarnList" :key="index">
					<view class="table">{{item.equipmentName}}</view>
					<view class="warn-item" v-for="(child,childIndex) in item.partsVOList" :key="childIndex">
						<view class="flexWrap">
							<view class="object">{{child.partsName}}<text
									:class="{'soon-expire':child.status==1,'has-expired':child.status==2}">{{child.status==1?'即将耗尽':'已耗尽'}}</text>
							</view>
							<view class="btn" @tap="handlePurchase(item.equipmentName,child)">购买/复位</view>
						</view>
						<view class="use-time">{{child.content}}</view>
					</view>
				</view>
			</view>

			<view class="star-level-box flexWrapNo" v-if="starsScore">
				<text class="label">门店星级</text>
				<view class="star-num flexWrapNo">
					<uni-rate allow-half :size="16" :readonly="true" :value="starsScore" active-color="#FF8E00" />
					<text>{{starsScore}}</text>
				</view>
			</view>

			<view class="patrolReport-box">
				<view class="report-top flexWrap">
					<view class="title">最新巡店报告</view>
					<view class="look" @tap="goPage('/shop-inspection/inspectionRecordList?type=boss')"  v-if="report!=null">
						更多<uni-icons type="right" size="13" color=" rgba(255, 255, 255, 0.6)"></uni-icons>
					</view>
				</view>
				<block v-if="report!=null">
					<view class="inspection-info">巡店时间：{{report.patrolStart||''}}~{{report.patrolEnd||''}}</view>
					<view class="inspection-info">巡店人：{{username||''}}</view>
					<view class="grade">{{report.starsScore}}（{{patrolScore}}分）</view>
					<view class="inspection-summarize">
						<view class="title">巡店总结：</view>
						<view class="desc">{{report.summary||'加载中...'}}</view>
					</view>
				</block>
				<view class="empty-box" v-else>
					<image src="https://static.mo-yu.vip/wechat/images/orderEmpty.png"></image>
				</view>
			</view>
			<view class="classify-box" v-if="unqualifiedList.length!=0">
				<view class="classify-title">不合格<text class="disqualification">{{unqualifiedNum}}</text>项</view>
				<view class="inspect-box">
					<view class="inspect-item" v-for="(item,index) in unqualifiedList" :key="index">
						<view class="content">{{index+1}}（{{item.originalScore}}分）：{{item.project}}</view>
						<view class="status flexWrap">
							<text>整改记录</text>
							<view class="disqualification" @tap="goPage(`/shop-inspection/bossRectifyRecord?id=${item.id}&series=${index+1}`)"
								v-if="item.status==1">
								待整改<uni-icons type="right" size="13" color="rgba(255, 255, 255, 0.5)"></uni-icons>
							</view>
							<view class="orange" @tap="goPage(`/shop-inspection/bossRectifyRecord?id=${item.id}&series=${index+1}`)"
								v-if="item.status==2">
								待审核<uni-icons type="right" size="13" color="rgba(255, 255, 255, 0.5)"></uni-icons>
							</view>
							<view class="qualification" @tap="goPage(`/shop-inspection/bossRectifyRecord?id=${item.id}&series=${index+1}`)"
								v-if="item.status==3">
								已整改<uni-icons type="right" size="13" color="rgba(255, 255, 255, 0.5)"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="classify-box" v-if="qualifiedList.length!=0">
				<view class="classify-title">合格<text class="qualification">{{qualifiedList.length}}</text>项</view>
				<view class="inspect-box">
					<view class="inspect-item" v-for="(item,k) in qualifiedList" :key="k">
						<view class="content">{{unqualifiedList.length+k+1}}（{{item.originalScore}}分）：{{item.project}}</view>
						<view class="status flexWrap" v-if="item.recordType==3">
							<text>优化建议</text>
							<view class="other" @tap="goPage(`/shop-inspection/optimizeSuggestion?id=${item.id}&series=${unqualifiedList.length+k+1}`)">
								查看<uni-icons type="right" size="13" color="rgba(255, 255, 255, 0.5)"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部弹窗 -->
		<uni-popup ref="popup" type="bottom" :is-mask-click="false" mask-background-color="rgba(0,0,0,0.7)">
			<view class="popup-content">
				<uni-icons type="closeempty" size="22" color="#fff" class="close-icon" @tap="closePopup"></uni-icons>
				<block v-if="!isReset">
					<view class="table">{{equipmentName}}</view>
					<view class="content flexWrapNo">
						<text class="object">{{partsName}}</text> | <text class="status"
							:class="{'soon-expire':partsStatus==1,'has-expired':partsStatus==2}">{{partsStatus==1?'即将耗尽':'已耗尽'}}</text>
					</view>
					<view class="btn purchase-btn" @tap="goPage('/pages/shop/shopList?categoryId='+categoryId)">立即购买
					</view>
					<view class="btn reset-btn" @tap="handleReset">复位</view>
				</block>
				<block v-if="isReset">
					<view class="title">复位</view>
					<view class="choose-date-box flexWrapNo">
						<view class="label">更换日期</view>
						<picker mode="date" :value="resetDate" @change="bindDateChange" :end="currentDate">
							<view class="select-input" v-if="resetDate">{{resetDate}}</view>
							<view class="select-input" v-else>请选择</view>
						</picker>
					</view>
					<view class="tips">
						为避免设备检测不准确，请确保设备已更换后再复位，复位后将重新累计设备使用时长。
					</view>
					<view class="btn sure-btn" @tap="submit">确定复位</view>
				</block>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				pageOpc: 0,
				currentDate: currentDate,
				isReset: false,
				resetDate: '',
				plantWarnList: [],
				partsid: "",
				equipmentName: "",
				partsName: "",
				partsStatus: 1,
				categoryId: 0,
				report:null,
				patrolScore: 0, //巡检评分
				starsScore: 0, //星级
				username: '', //巡店人
				unqualifiedList: [], //不合格
				qualifiedList: [], //合格
				scoreInfo:{}
			}
		},
		onReady() {
			setTimeout(() => {
				this.pageOpc = 1
			}, 100)
		},
		onShow() {
			this.getNewestReport();
			this.getPlantWarn();
			this.getStoreScore();
		},
		computed:{
			unqualifiedNum(){
				return this.unqualifiedList.filter(item => item.status!=3).length
			}
		},
		methods: {
			// 获取日期 --当前时间
			getDate(type) {
				const date = new Date();
				date.setDate(date.getDate());
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`
			},

			handlePurchase(equipmentName, partsItem) {
				this.equipmentName = equipmentName
				this.partsName = partsItem.partsName
				this.partsStatus = partsItem.status
				this.partsid = partsItem.id
				this.categoryId = partsItem.partsType
				this.$refs.popup.open()
			},
			closePopup() {
				this.isReset = false
				this.resetDate = ''
				this.$refs.popup.close()
			},

			handleReset() {
				this.isReset = true
			},

			bindDateChange(e) {
				this.resetDate = e.target.value
			},

			// 确定复位
			submit() {
				this.plantReset();
			},
			// 设备配件复位
			plantReset() {
				if (!this.resetDate) {
					this.$tools.showToast('请选择更新时间')
					return;
				}
				this.$request.post(this.$api.plantReset, {
					id: this.partsid,
					storeId: uni.getStorageSync('store_id'),
					resetTime: this.resetDate + ' 23:59:59'
				}, {
					isJava: true
				}).then(res => {
					if (res.code == 200) {
						this.$tools.showToast('操作成功')
						this.closePopup()
						this.getPlantWarn();
					}
				})
			},
			// 最新报告
			getNewestReport() {
				this.$request.get(this.$api.getNewestReport, {
					storeId: uni.getStorageSync('store_id')
				}, {
					isJava: true
				}).then(res => {
					if (res.code == 200) {
						let {
							data = {}
						} = res;
						if(data!=null){
							[this.unqualifiedList, this.qualifiedList] = this.partitionArray(data.reportProjectList, item => item.status)
							this.report = data.report
							this.patrolScore = data.patrolScore
							this.starsScore = data.starsScore
							this.username = data.username
						}
					}
				})
			},
			
			// 筛选数据
			partitionArray(arr, predicate) {
				return arr.reduce((acc, val) => {
					const partition = predicate(val) ? 0 : 1;
					acc[partition].push(val);
					return acc;
				}, [[],[]]);
			},
			// 设备配件预警
			getPlantWarn() {
				this.$request.post(this.$api.plantWarn, {
					storeId: uni.getStorageSync('store_id')
				}, {
					isJava: true
				}).then(res => {
					if (res.code == 200) {
						let {
							data = {}
						} = res;
						this.plantWarnList = data
					}
				})
			},
			// 美团抖音评分数据
			getStoreScore(){
				this.$request.post(this.$api.getStoreScore, {
					storeId: uni.getStorageSync('store_id')
				}, {
					isJava: true
				}).then(res => {
					if (res.code == 200) {
						let {
							data = {}
						} = res;
						this.scoreInfo=data
						console.log(this.scoreInfo)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.store-inspection-container {
		padding: 28rpx;
	}

	.grade-box {
		.grade-top {
			margin-bottom: 14rpx;

			.title {
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
			}

			.time {
				color: rgba(255, 255, 255, 0.5);
				font-size: 24rpx;
			}
		}

		.grade-item {
			flex: 1;
			background: #1D1C5C;
			padding: 20rpx;
			border-radius: 12rpx;

			.item-top {
				.name {
					color: #fff;
					font-size: 28rpx;
				}

				.look {
					color: rgba(255, 255, 255, 0.5);
					font-size: 22rpx;
				}
			}

			.score {
				color: #fff;
				font-size: 48rpx;
				padding: 6rpx 0;
			}

			.info {
				margin-top: 4rpx;
				letter-spacing: 2rpx;
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.5);

				.up {
					color: #2BA471;
				}

				.down {
					color: #D54941;
				}

				.highlight {
					color: rgba(255, 255, 255, 1);
				}
			}
		}
	}

	.warning-box {
		margin-top: 14rpx;
		background: #1D1C5C;
		border-radius: 12rpx;
		padding: 20rpx;

		.warn-top {
			.title {
				color: #fff;
				font-size: 28rpx;
				font-weight: bold;

				text {
					color: #D54941;
				}
			}

			.tips {
				font-size: 22rpx;
				color: rgba(255, 255, 255, 0.5);
			}
		}

		.table-item {
			margin-top: 20rpx;

			.table {
				font-size: 26rpx;
				color: #fff;
			}

			.warn-item {
				margin-top: 20rpx;

				&:nth-of-type(2) {
					margin-top: 10rpx;
				}

				.object {
					font-size: 24rpx;
					color: #fff;

					.soon-expire {
						margin-left: 10rpx;
						color: #FFB726;
					}

					.has-expired {
						margin-left: 10rpx;
						color: #D54941;
					}
				}

				.btn {
					color: #fff;
					font-size: 26rpx;
					padding: 6rpx 14rpx;
					background: #26BCFD;
					border-radius: 8rpx
				}

				.use-time {
					margin-top: 8rpx;
					font-size: 22rpx;
					color: rgba(255, 255, 255, 0.5);
				}
			}
		}
	}

	.star-level-box {
		margin-top: 20rpx;
		gap: 14rpx;

		.label {
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
		}

		.star-num {
			color: #FF8E00;
			font-size: 28rpx;
			font-weight: bold;
			gap: 10rpx;
		}
	}

	.patrolReport-box {
		margin-top: 14rpx;
		background: #1D1C5C;
		border-radius: 12rpx;
		padding: 20rpx;

		.report-top {
			.title {
				color: #fff;
				font-size: 26rpx;
				font-weight: bold;
			}

			.look {
				color: rgba(255, 255, 255, 0.5);
				font-size: 22rpx;
			}
		}

		.inspection-info {
			margin-top: 10rpx;
			color: rgba(255, 255, 255, 0.5);
			font-size: 22rpx;
		}

		.grade {
			margin-top: 12rpx;
			font-size: 26rpx;
			color: #FFFFFF;
		}

		.inspection-summarize {
			margin-top: 12rpx;

			.title {
				color: rgba(255, 255, 255, 0.5);
				font-size: 24rpx;
			}

			.desc {
				margin-top: 10rpx;
				color: rgba(255, 255, 255, 0.8);
				font-size: 22rpx;
			}
		}

	}

	.classify-box {
		margin-top: 14rpx;
		background: #1D1C5C;
		border-radius: 12rpx;
		padding: 20rpx;

		.disqualification {
			color: #D54941;
		}

		.qualification {
			color: #2BA471;
		}
		.orange{
			color: #FF8E00;
		}
		.other {
			color: #FFB726;
		}

		.classify-title {
			font-weight: bold;
			font-size: 26rpx;
			color: #FFFFFF;
		}

		.inspect-box {
			margin-top: 10rpx;

			.inspect-item {
				padding: 7rpx 0;

				&:last-child {
					border-bottom: none;
				}

				.content {
					font-size: 22rpx;
					color: rgba(255, 255, 255, 0.8);
					line-height: 34rpx;
				}

				.status {
					margin-top: 7rpx;
					font-size: 22rpx;
					color: rgba(255, 255, 255, 0.5);
				}
			}
		}
	}

	.popup-content {
		background: #1A195F;
		padding: 32rpx 32rpx 62rpx 32rpx;
		border-radius: 16rpx;

		.close-icon {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}

		.table,
		.title {
			margin-top: 30rpx;
			font-size: 32rpx;
			text-align: center;
			letter-spacing: 2rpx;
			color: #fff;
		}

		.content {
			margin-top: 30rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #fff;
			justify-content: center;

			.object {
				margin-right: 20rpx;
			}

			.status {
				margin-left: 20rpx;
			}

			.soon-expire {
				color: #FFB726;
			}

			.has-expired {
				color: #D54941;
			}
		}

		.btn {
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			border-radius: 35rpx;
		}

		.purchase-btn,
		.sure-btn {
			margin-top: 60rpx;
			background: #26BCFD;
		}

		.reset-btn {
			margin-top: 40rpx;
			color: #26BCFD;
			border: 1rpx solid #26BCFD;
			box-sizing: border-box;
		}

		.choose-date-box {
			margin-top: 50rpx;
			gap: 20rpx;

			.label {
				color: #fff;
				font-size: 28rpx;
			}

			picker {
				flex: 1;
			}

			.select-input {
				flex: 1;
				color: #fff;
				font-size: 28rpx;
				background: #353484;
				border-radius: 8rpx;
				padding: 14rpx 20rpx;
			}
		}

		.tips {
			margin-top: 14rpx;
			color: rgba(255, 255, 255, 0.5);
			font-size: 24rpx;
		}
	}
</style>